<template>
  <div class="">
    <div class="row auto" style="background-color: #304A66; padding-top: 40px;">
      <p class="text-left" style="padding-left: 20px;">
        <img src="../../assets/燃气缴费 (2).png" style="width: 60px;border: 2px solid white;border-radius: 4%;"  alt="燃气缴费">
        <span style="color: white;font-size: 20px;">&nbsp;&nbsp;&nbsp;博能燃气手机抄表</span>
        <span style="color: white;font-size: 14px;display: block;padding-left: 80px;">
           编号： {{userInfo.id}} &nbsp;&nbsp;抄表员：{{userInfo.name}}
        </span>
      </p>
    </div>
    <div class="row auto" style="padding: 20px 0 30px 0;">
      <div class="col-xs-4 text-center"  @click="goPage('计划下载')">
        <img src="../../assets/下载 (2).png" style="width: 50px;" alt="">
        <p class="text-center" style="margin: 10px 0;"><small><strong>计划下载</strong></small></p>
      </div>
      <div class="col-xs-4 text-center"  @click="goPage('抄表管理')">
        <img src="../../assets/报表.png" style="width: 50px;" alt="">
        <p class="text-center" style="margin: 10px 0;"><small><strong>抄表管理</strong></small></p>
      </div>
      <div class="col-xs-4 text-center"  @click="goPage('抄表记录')">
        <img src="../../assets/历史 (2).png" style="width: 50px;" alt="">
        <p class="text-center" style="margin: 10px 0;"><small><strong>抄表记录</strong></small></p>
      </div>
      <div class="col-xs-4 text-center"  @click="goPage('表单上传')">
        <img src="../../assets/上传 (4).png" style="width: 50px;" alt="">
        <p class="text-center" style="margin: 10px 0;"><small><strong>表单上传</strong></small></p>
      </div>
    </div>
  </div>
</template>

<script>
import AppData from '../../stores/AppData'
export default {
  title: '底部导航',
  data () {
    return {
      userInfo: {}
    }
  },
  props: {
    menus: {
      type: Array,
      default: function () {
        return [
          {name: '计划下载', imgpath: '../../assets/下载 (2).png'},
          {name: '抄表管理', imgpath: '../../assets/报表.png'},
          {name: '抄表记录', imgpath: '../../assets/历史 (2).png'},
          {name: '表单上传', imgpath: '../../assets/上传 (4).png'}
        ]
      }
    }
  },
  ready () {
    console.log()
    this.userInfo = Object.assign({}, this.userInfo, AppData.loginUser)
  },
  methods: {
    goPage (page) {
      this.$dispatch('menu', page)
    }
  }
}
</script>
<style>

</style>
